<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
        }
        .text{
            font-size: 13.3333px;
            position: absolute;
            left: 6px;
            top: 7px;
            font-family: 'Arial';
        }
        .exam{
            display: none;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" name="text" placeholder="请输入内容" style="padding: 5px;">
        <div class="text"></div>
    </div>
    <div class="exam">输入值不合法</div>
</body>
<script>
    var input = document.querySelector('input');
    var div = document.querySelector('.text');
    var exam = document.querySelector('.exam');
    let data = '';
    input.onfocus = function (e) {    
       e.target.value = data;   
       div.innerHTML = '';
       div.style.display = 'none';
       input.style.border = '2px solid red';
       input.style.outline = 'none';
       exam.style.display = 'none';
    }
    input.onblur = function (e) {
        input.style.border = '2px solid skyblue';
         data = e.target.value;
        if(e.target.value&&e.target.value.includes('1')){
            let val = e.target.value;
            let newVal = '';
            for(let i=0;i<val.length;i++){
                if(val[i]==='1'){
                    newVal += `<span style="color:red;">${val[i]}</span>`;
                }else{
                    newVal += val[i];
                }
            }
            e.target.value = '';
            e.target.placeholder = '';
            div.innerHTML = newVal;
            div.style.display = 'block';
            exam.style.display = 'block';
        }
    }
</script>
</html>